<template>
  <div class="statusContainer">
    <div id="main" width="100" height="100"></div>
  </div>
</template>
<script>
export default {
  methods: {
    drawDeviceStatusCircle(status) {
      var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    canvas.width = 50;
    canvas.height = 50;
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 70;
    var statusText = this.getStatusText(status);
    var statusColor = this.getStatusColor(status);
    var statusDescription = "设备状态";
    var fontSizeSmall = 14;
    var fontSizeBig = 20;
    var rippleRadius = 0;
    var rippleSpeed = 0.2;

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制圆形
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = statusColor;
        ctx.fill();

        // 添加状态说明
        ctx.fillStyle = 'black';
        ctx.font = 'bold ' + fontSizeSmall + 'px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(statusDescription, centerX, centerY - fontSizeBig);

        // 添加具体状态
        ctx.fillStyle = 'black';
        ctx.font = 'bold ' + fontSizeBig + 'px Arial';
        ctx.fillText(statusText, centerX, centerY + fontSizeSmall);

        // 添加动态效果
        if (status === 'running') {
            drawRipple();
        } else if (status === 'stopped') {
            // 在停止状态下不添加动态效果
        } else if (status === 'faulty') {
            ctx.globalAlpha = Math.abs(Math.sin(Date.now() / 300)) * 0.5 + 0.5;
        } else if (status === 'offline') {
            ctx.shadowBlur = Math.abs(Math.sin(Date.now() / 300)) * 10;
        }

        requestAnimationFrame(draw);
    }
    function drawRipple() {
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius + rippleRadius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.strokeStyle = statusColor;
        ctx.stroke();

        rippleRadius += rippleSpeed;
        if (rippleRadius > 20) {
            rippleRadius = 0;
        }
    }


    draw();

    return canvas;
    },
    getStatusText(status){
      switch (status) {
        case 'running':
            return '运行中';
        case 'stopped':
            return '停止';
        case 'faulty':
            return '故障';
        case 'offline':
            return '离线';
        default:
            return '';
    }
    },
    getStatusColor(status){
      switch (status) {
        case 'running':
            return 'green';
        case 'stopped':
            return 'yellow';
        case 'faulty':
            return 'red';
        case 'offline':
            return 'white';
        default:
            return 'black';
    }
    }
  },
  mounted() {
    var canvas = this.drawDeviceStatusCircle('running');
    document.getElementById('main').appendChild(canvas);
  }
}
</script>
<style lang="less" scoped>
.statusContainer {
  height: 100%;
  width: 100%;
}
</style>